import React, { useState, useEffect, useRef } from 'react';
import { Cpu, Zap, Shield, Code, ArrowRight, Menu, X } from 'lucide-react';

export default function SciFiTechWebsite() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const canvasRef = useRef(null);
  
  // 粒子背景动画
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    const particles = [];
    const particleCount = 100;
    
    class Particle {
      constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.vx = (Math.random() - 0.5) * 0.5;
        this.vy = (Math.random() - 0.5) * 0.5;
        this.radius = Math.random() * 1.5;
      }
      
      update() {
        this.x += this.vx;
        this.y += this.vy;
        
        if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
        if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
      }
      
      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(0, 240, 255, 0.6)';
        ctx.fill();
      }
    }
    
    for (let i = 0; i < particleCount; i++) {
      particles.push(new Particle());
    }
    
    function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      particles.forEach((particle, i) => {
        particle.update();
        particle.draw();
        
        // 连接邻近粒子
        particles.slice(i + 1).forEach(otherParticle => {
          const dx = particle.x - otherParticle.x;
          const dy = particle.y - otherParticle.y;
          const distance = Math.sqrt(dx * dx + dy * dy);
          
          if (distance < 100) {
            ctx.beginPath();
            ctx.strokeStyle = `rgba(0, 240, 255, ${0.2 * (1 - distance / 100)})`;
            ctx.lineWidth = 0.5;
            ctx.moveTo(particle.x, particle.y);
            ctx.lineTo(otherParticle.x, otherParticle.y);
            ctx.stroke();
          }
        });
      });
      
      requestAnimationFrame(animate);
    }
    
    animate();
    
    const handleResize = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    };
    
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  const features = [
    {
      icon: <Cpu className="w-8 h-8" />,
      title: "量子计算",
      description: "下一代计算能力，突破传统处理器的极限"
    },
    {
      icon: <Zap className="w-8 h-8" />,
      title: "闪电部署",
      description: "毫秒级响应，即时扩展，零宕机时间"
    },
    {
      icon: <Shield className="w-8 h-8" />,
      title: "量子加密",
      description: "军事级安全防护，保护您的核心数据"
    },
    {
      icon: <Code className="w-8 h-8" />,
      title: "AI 驱动",
      description: "智能自适应系统，持续学习优化"
    }
  ];
  
  return (
    <div className="relative min-h-screen bg-black text-white overflow-hidden">
      {/* 粒子背景 */}
      <canvas 
        ref={canvasRef}
        className="fixed inset-0 pointer-events-none"
        style={{ zIndex: 0 }}
      />
      
      {/* 网格背景 */}
      <div className="fixed inset-0 opacity-20" style={{ 
        backgroundImage: 'linear-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px)',
        backgroundSize: '50px 50px',
        zIndex: 0
      }} />
      
      {/* 渐变光效 */}
      <div className="fixed top-0 left-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl" style={{ zIndex: 0 }} />
      <div className="fixed bottom-0 right-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl" style={{ zIndex: 0 }} />
      
      {/* 内容容器 */}
      <div className="relative" style={{ zIndex: 1 }}>
        {/* 导航栏 */}
        <nav className="fixed top-0 left-0 right-0 backdrop-blur-md bg-black/30 border-b border-cyan-500/20 z-50">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex items-center justify-between h-16">
              <div className="flex items-center">
                <div className="flex-shrink-0">
                  <span className="text-2xl font-bold text-cyan-400 animate-pulse">NEXUS</span>
                </div>
              </div>
              
              <div className="hidden md:block">
                <div className="ml-10 flex items-baseline space-x-8">
                  <a href="#" className="text-cyan-400 hover:text-cyan-300 transition-colors">产品</a>
                  <a href="#" className="text-white hover:text-cyan-400 transition-colors">解决方案</a>
                  <a href="#" className="text-white hover:text-cyan-400 transition-colors">技术</a>
                  <a href="#" className="text-white hover:text-cyan-400 transition-colors">关于</a>
                </div>
              </div>
              
              <div className="md:hidden">
                <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-cyan-400">
                  {isMenuOpen ? <X /> : <Menu />}
                </button>
              </div>
            </div>
          </div>
          
          {/* 移动端菜单 */}
          {isMenuOpen && (
            <div className="md:hidden backdrop-blur-md bg-black/90 border-t border-cyan-500/20">
              <div className="px-2 pt-2 pb-3 space-y-1">
                <a href="#" className="block px-3 py-2 text-cyan-400">产品</a>
                <a href="#" className="block px-3 py-2 text-white hover:text-cyan-400">解决方案</a>
                <a href="#" className="block px-3 py-2 text-white hover:text-cyan-400">技术</a>
                <a href="#" className="block px-3 py-2 text-white hover:text-cyan-400">关于</a>
              </div>
            </div>
          )}
        </nav>
        
        {/* Hero Section */}
        <section className="min-h-screen flex items-center justify-center px-4 pt-16">
          <div className="max-w-7xl mx-auto text-center">
            <div className="mb-8">
              <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold mb-6 leading-tight">
                <span className="inline-block animate-pulse text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-purple-400 to-cyan-400">
                  未来
                </span>
                <br />
                <span className="text-white">已经到来</span>
              </h1>
              
              <div className="relative inline-block">
                <div className="absolute inset-0 blur-xl bg-cyan-500/50 animate-pulse" />
                <p className="relative text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto">
                  突破技术边界，构建下一代智能系统
                </p>
              </div>
            </div>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mt-12">
              <button className="group relative px-8 py-4 bg-transparent border-2 border-cyan-500 text-cyan-400 font-bold overflow-hidden transition-all duration-300 hover:text-black">
                <span className="relative z-10 flex items-center gap-2">
                  启动系统
                  <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                </span>
                <div className="absolute inset-0 bg-cyan-500 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300" />
              </button>
              
              <button className="px-8 py-4 backdrop-blur-md bg-white/5 border border-white/10 text-white font-bold hover:bg-white/10 transition-all duration-300">
                了解更多
              </button>
            </div>
            
            {/* 向下滚动指示器 */}
            <div className="mt-20 animate-bounce">
              <div className="w-6 h-10 border-2 border-cyan-400 rounded-full mx-auto flex justify-center">
                <div className="w-1 h-3 bg-cyan-400 rounded-full mt-2 animate-pulse" />
              </div>
            </div>
          </div>
        </section>
        
        {/* Features Section */}
        <section className="py-20 px-4">
          <div className="max-w-7xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-4xl md:text-5xl font-bold mb-4">
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400">
                  核心技术
                </span>
              </h2>
              <p className="text-gray-400 text-lg">领先行业的创新解决方案</p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {features.map((feature, index) => (
                <div
                  key={index}
                  className="group backdrop-blur-md bg-white/5 border border-cyan-500/20 rounded-lg p-6 hover:bg-white/10 hover:border-cyan-500/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-cyan-500/20"
                  style={{ animationDelay: `${index * 100}ms` }}
                >
                  <div className="text-cyan-400 mb-4 group-hover:scale-110 transition-transform duration-300">
                    {feature.icon}
                  </div>
                  <h3 className="text-xl font-bold mb-2 text-white">{feature.title}</h3>
                  <p className="text-gray-400">{feature.description}</p>
                  
                  <div className="absolute inset-0 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
                    <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent" />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
        
        {/* Stats Section */}
        <section className="py-20 px-4 backdrop-blur-md bg-cyan-950/10 border-y border-cyan-500/20">
          <div className="max-w-7xl mx-auto">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
              {[
                { value: '99.99%', label: '系统可用性' },
                { value: '<1ms', label: '响应时间' },
                { value: '1M+', label: '活跃用户' },
                { value: '24/7', label: '技术支持' }
              ].map((stat, index) => (
                <div key={index}>
                  <div className="text-4xl md:text-5xl font-bold text-cyan-400 mb-2 animate-pulse">
                    {stat.value}
                  </div>
                  <div className="text-gray-400">{stat.label}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
        
        {/* CTA Section */}
        <section className="py-32 px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-4xl md:text-6xl font-bold mb-6">
              准备好迎接
              <span className="block text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400 animate-pulse">
                未来了吗？
              </span>
            </h2>
            <p className="text-xl text-gray-400 mb-12">
              加入数千家领先企业，共同开创技术新纪元
            </p>
            <button className="group relative px-12 py-5 bg-transparent border-2 border-purple-500 text-purple-400 font-bold text-lg overflow-hidden transition-all duration-300 hover:text-black">
              <span className="relative z-10 flex items-center gap-2">
                立即开始
                <ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform" />
              </span>
              <div className="absolute inset-0 bg-gradient-to-r from-cyan-500 to-purple-500 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300" />
            </button>
          </div>
        </section>
        
        {/* Footer */}
        <footer className="border-t border-cyan-500/20 py-12 px-4 backdrop-blur-md bg-black/50">
          <div className="max-w-7xl mx-auto">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
              <div>
                <h3 className="text-cyan-400 font-bold mb-4">产品</h3>
                <ul className="space-y-2 text-gray-400">
                  <li><a href="#" className="hover:text-cyan-400 transition-colors">量子计算平台</a></li>
                  <li><a href="#" className="hover:text-cyan-400 transition-colors">AI 引擎</a></li>
                  <li><a href="#" className="hover:text-cyan-400 transition-colors">云服务</a></li>
                </ul>
              </div>
              
              <div>
                <h3 className="text-cyan-400 font-bold mb-4">解决方案</h3>
                <ul className="space-y-2 text-gray-400">
                  <li><a href="#" className="hover:text-cyan-400 transition-colors">企业级</a></li>
                  <li><a href="#" className="hover:text-cyan-400 transition-colors">开发者</a></li>
                  <li><a href="#" className="hover:text-cyan-400 transition-colors">初创公司</a></li>
                </ul>
              </div>
              
              <div>
                <h3 className="text-cyan-400 font-bold mb-4">资源</h3>
                <ul className="space-y-2 text-gray-400">
                  <li><a href="#" className="hover:text-cyan-400 transition-colors">文档</a></li>
                  <li><a href="#" className="hover:text-cyan-400 transition-colors">API 参考</a></li>
                  <li><a href="#" className="hover:text-cyan-400 transition-colors">社区</a></li>
                </ul>
              </div>
              
              <div>
                <h3 className="text-cyan-400 font-bold mb-4">公司</h3>
                <ul className="space-y-2 text-gray-400">
                  <li><a href="#" className="hover:text-cyan-400 transition-colors">关于我们</a></li>
                  <li><a href="#" className="hover:text-cyan-400 transition-colors">博客</a></li>
                  <li><a href="#" className="hover:text-cyan-400 transition-colors">加入我们</a></li>
                </ul>
              </div>
            </div>
            
            <div className="border-t border-cyan-500/20 pt-8 text-center text-gray-500">
              <p>&copy; 2025 NEXUS Technology. 保留所有权利。</p>
            </div>
          </div>
        </footer>
      </div>
    </div>
  );
}